<template>
	<view class="content">
		<!-- 头部 -->
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }"
			 @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>

		<!-- 显示区域 -->
		<view class="orderFirst" v-for="(items,index) in orderList" :key="index" style="margin-bottom: 20rpx;">

			<view v-if="items.advanceFlag==0">

				<view class="orderSn">
					<view class="orderSnwrap"><text>订单编号</text><text>{{items.orderNo}}</text></view>
				</view>
				<view class="orderFirst_wrap">
					<view class="orderFirstAll">
						<view class="orderFirst_wrap_title" v-for="(item,index) in items.orderDetail" :key="index">
							<view>
								<image class="orderFirst_image" :src="item.img"></image>
							</view>
							<view class="orderFirst_wrap_title_text">
								<text>{{item.productName}}</text>
								<view class="orderFirst_wrap_title_text_image">
									<view>
										<image src="../../static/image/orderIcon.png" mode=""></image>
									</view>
									<view>
										<text>不支持7天无理由退货</text>
									</view>
								</view>
								<view class="order_title_bottom">
									<view>x{{item.quantity}}</view>
									<view><span style="font-size: 26rpx;">￥{{item.price|money}}</span></view>
								</view>
							</view>
						</view>
					</view>

					<view class="orderMoney" style="border-bottom: none;">
						<view>
							<text class="orderMoneyFir">共{{items.totalQuantity}}块</text>
							<text class="orderMoneySec">小计：</text>
							<text class="orderMoneyLas"><text class="orderMoneyLasf">￥{{items.totalPrice|money}}</text></text>
						</view>
					</view>
					<view class="orderMoneyBtn" v-if="items.payStatus==0">
						<view @click="cancelOrder(items.orderId)">取消订单</view>
						<view @click="payMoney(items.orderId)">立即支付</view>
					</view>
				</view>

			</view>

			<view class="advanceSale" v-if="items.advanceFlag==1" style="margin-bottom: 20rpx;">
				<view class="orderSn">
					<view class="orderSnwrap"><text>订单编号</text><text>{{items.orderNo}}</text></view>
				</view>
				<view class="orderFirst_wrap">
					<view v-for="(item,index) in items.orderDetail" :key="index">

						<view class="orderFirst_wrap_title">
							<view>
								<image class="orderFirst_image" :src="item.img"></image>
							</view>
							<view class="orderFirst_wrap_title_text">

								<view class="orderConfirmTitleText">
									<view class="orderFirstIcon">预售</view>{{item.productName}}
								</view>
								<view class="orderFirst_wrap_title_text_image">
									<view>
										<image src="../../static/image/orderIcon.png" mode=""></image>
									</view>
									<view>
										<text>不支持7天无理由退货</text>
									</view>
								</view>
								<view class="order_title_bottom">
									<view>x{{item.quantity}}</view>
									<view class="orderTopLeft">
										<view style="color:rgba(17,17,17,1);"><span style="font-size: 26rpx;">￥{{item.advancePrice||money}}</span></view>
										<view style="text-decoration:line-through;color:rgba(153,153,153,1);"><span style="font-size: 26rpx;">￥{{item.totalPrice||money}}</span></view>
									</view>
								</view>
							</view>
						</view>
						<view class="orderFirst_wrap_title advance_wrap">
							<view class="advance_wrapContent">
								<view class="advance_wrapContentTitle">
									支付尾款后拥有光伏组件所有权并获得互助保障
								</view>
								<view class="section">
									<view class="section-head">
										<text>￥{{item.totalDepositAmount|money}}</text>
										<text>￥{{item.totalFinalAmount|money}}</text>
									</view>
									<view class="sectionLine">
										<image src="../../static/image/process.png"></image>
									</view>
									<view class="section_flex">
										<view style="color: #333333;">支付定金</view>
										<view class="section_bottomFirst">
											<text style="color: #333333;">支付尾款</text>
											<view class="section_bottom">
												<view>
													<image src="../../static/image/sectionTime.png"></image>
												</view>

												<view class="sectionTime" v-if="item.payStartTime!=undefined">
													<text>{{item.payStartTime|formatDate}}</text>-<text>{{item.payEndTime|formatDate}}</text></view>
											</view>
										</view>
									</view>
								</view>
							</view>

						</view>

					</view>

					<view class="orderMoney" style="border-bottom: none;">
						<view>
							<text class="orderMoneyFir">共{{items.totalQuantity}}块</text>
							<text v-if="items.payStage==0"><text class="orderMoneySec">定金：</text><text class="orderMoneyLas">￥{{items.totalDepositAmount|money}}</text></text>
							<text v-if="items.payStage==1"><text class="orderMoneySec">尾款：</text><text class="orderMoneyLas">￥{{items.totalFinalAmount|money}}</text></text>
							<text v-if="items.payStage==2">
								<text style="margin-right: 20rpx;">
									<text class="orderMoneySec">定金：</text><text class="orderMoneyLas">￥{{items.totalDepositAmount|money}}</text>
								</text>
								<text>
									<text class="orderMoneySec">尾款：</text><text class="orderMoneyLas">￥{{items.totalFinalAmount|money}}</text>
								</text>
							</text>
						</view>
					</view>
					<!-- 支付按钮显示隐藏问题 -->
					<!-- 支付定金 -->
					<view class="orderMoneyBtn" v-if="items.payStatus==0&&items.payStage==0">
						<view @click="cancelOrder(items.orderId)">取消订单</view>
						<view @click="payMents(items.orderId)">立即支付</view>
					</view>
					<!-- 支付尾款 -->
					<view class="orderMoneyBtn" v-if="items.payStatus==0&&items.payStage==1&&items.setColor==false">
						<view @click="payMents(items.orderId)">支付尾款</view>
					</view>
					<!-- 不可点击支付 -->
					<view class="orderMoneyBtn" v-if="items.payStatus==0&&items.payStage==1&&items.setColor==true">
						<view style="background: #EEEEEE;">支付尾款</view>
					</view>

				</view>
			</view>
		</view>


		<view class="orderNone" v-if="orderList.length==0">
			<image src="../../static/image/orderNone.png"></image>
			<text>您还没有相关订单~</text>
		</view>


	</view>
</template>

<script>
	import api from '../../api/index.js';
	var timer = []; //总的定时器
	export default {

		data() {
			return {
				tabCurrentIndex: 0, //tab切换
				navList: [{
						state: 0,
						text: '全部',
					},
					{
						state: 1,
						text: '待付款',
					},
					{
						state: 2,
						text: '预售',
					}
				],
				orderList: [], //订单列表
			};
		},

		onLoad(options) {
			// 页面显示是默认选中第一个
			this.tabCurrentIndex = parseInt(options.tabCurrentIndex);
			this.getDetails()
		},
		// 销毁页面的时候清空定时器
		beforeDestroy() {
			this.clearTimer()
		},
		methods: {
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.getDetails()
			},
			// 获取订单列表
			getDetails() {
				api.joinHellp.mineOrder(
					this.tabCurrentIndex
				).then(res => {
					if (res.code == 1) {
						this.orderList = res.data;
						let orderList = res.data;
						if (orderList.length != 0) {
							orderList.forEach((item, index) => {
								orderList.setColor = false;
								if (item.advanceFlag == 1) {
									let orderWrap = item.orderDetail[0];
									this.startDate(orderWrap.payStartTime, orderWrap.payEndTime, index)
									timer[index] = setInterval(() => {
										this.startDate(orderWrap.payStartTime, orderWrap.payEndTime, index)
									}, 60000)
								}
							})
						} else {
							this.clearTimer()
						}
					}
				})
			},
			// 清空定时器方法
			clearTimer() {
				timer.forEach((item, index) => {
					clearInterval(item)
				})
			},
			// 初始化进来就要判断
			startDate(d1, d2, idx) {
				let self = this;
				//如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
				var dateBegin = new Date(d1.replace(/-/g, "/")); //将-转化为/，使用new Date
				var dateEnd = new Date(d2.replace(/-/g, "/")); //将-转化为/，使用new Date
				// var dateBegin = new Date(d1); //将-转化为/，使用new Date
				// var dateEnd = new Date(d2); //将-转化为/，使用new Date
				var dateNow = new Date(); //获取当前时间
				var beginDiff = dateNow.getTime() - dateBegin.getTime(); //时间差的毫秒数       
				var beginDayDiff = Math.floor(beginDiff / (24 * 3600 * 1000)); //计算出相差天数
				var endDiff = dateEnd.getTime() - dateNow.getTime(); //时间差的毫秒数
				var endDayDiff = Math.floor(endDiff / (24 * 3600 * 1000)); //计算出相差天数
				if (endDayDiff < 0) { //已过期
					self.orderList[idx].setColor = true;
					self.$set(self.orderList, idx, self.orderList[idx]); //$set可以触发更新视图
					return false
				}
				if (beginDayDiff < 0) { //没到开始时间
					self.orderList[idx].setColor = true
					self.$set(self.orderList, idx, self.orderList[idx]); //$set可以触发更新视图
					return false;
				} else {
					self.orderList[idx].setColor = false
					self.$set(self.orderList, idx, self.orderList[idx]); //$set可以触发更新视图
				}
				return true;
			},

			// 取消订单
			cancelOrder(orderId) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确认取消订单吗',
					success: function(res) {
						if (res.confirm) {
							api.joinHellp.cancelOrder(
								orderId
							).then(res => {
								if (res.code == 1) {
									uni.showToast({
										title: '取消成功',
										icon: 'none',
										duration: 3000
									})
									that.getDetails()
								}
							})
						} else if (res.cancel) {

						}
					}
				});

			},
			// 普通订单立即支付
			payMoney(orderId) {
				this.$wftPay(orderId)
			},
			// 预售订单立即支付
			payMents(orderId) {
				this.$wftPay(orderId)
			},
		}
	};
</script>

<style lang="scss">
	@import "../confirmOrder/confirmOrder.css";

	//  没有订单的时候显示
	.orderNone {
		width: 631rpx;
		padding-top: 262rpx;
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.orderNone image {
		width: 100%;
		height: 340rpx;
	}

	.orderNone text {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
	}

	// 我的订单私有样式
	.orderFirst {
		height: auto;
		background: #FFFFFF;
	}

	.orderFirst:nth-of-type(2) {
		margin-top: 120rpx;
	}

	.orderFirstAll {
		border-bottom: 1px solid #EEEEEE;
	}

	.orderMoneyBtn {
		display: flex;
		justify-content: flex-end;
		margin-top: 15rpx;
	}

	.orderMoneyBtn view {
		width: 180rpx;
		height: 70rpx;
		background: rgba(101, 189, 1, 0);
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
	}

	.orderMoneyBtn view:first-child {
		border: 1px solid rgba(204, 204, 204, 1);
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
		margin-right: 20rpx;
	}

	.orderMoneyBtn view:last-child {
		background: rgba(101, 189, 1, 1);
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
	}

	.navbar {
		display: flex;
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 2;
	}

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28rpx;
		color: #666666;
		font-family: PingFang SC;
		font-weight: 500;
		position: relative;

		&.current {
			color: #111111;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;

			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 0;
				border-bottom: 6rpx solid #66BF00;
			}
		}
	}

	.orderConfirmTitleText {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(0, 0, 0, 1);
	}

	.orderFristFlex text {
		display: inline-block;
	}

	.orderFirstIcon {
		background: rgba(244, 165, 0, 1);
		font-size: 10rpx;
		font-family: OPPOSans;
		font-style: italic;
		color: rgba(255, 255, 255, 1);
		margin-right: 10rpx;
		display: inline-block;
		padding: 3rpx;
	}

	.orderTopLeft {
		display: flex;
		flex-direction: column;
	}

	.advanceSale {
		background: #FFFFFF;
	}

	.advance_wrap {
		height: 266rpx;
		background: rgba(244, 255, 233, 1);
		margin-bottom: 15rpx;
	}

	.advanceRule {
		margin-top: 0;
	}

	.orderMoney {
		height: 70rpx;
		display: flex;
		align-items: center;
	}

	.moneyFix {
		height: 120rpx;
	}

	.advanceFlex {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.advanceBottom text {
		width: 320rpx;
		font-size: 20rpx;
		color: #F4A500;
		border: 1px solid #F4A500;
		padding: 5rpx;
	}

	.advance_wrapContent {
		padding: 40rpx 60rpx;
	}

	.advance_wrapContentTitle {
		width: 550rpx;
		height: 50rpx;
		line-height: 48rpx;
		text-align: center;
		background: rgba(123, 187, 56, 1);
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		margin-bottom: 30rpx;
	}
</style>
